<!DOCTYPE html>
<html>
  <head>
    <title>Smartisan Markdown Editor</title>
    <script src="./vue.js"></script>
    <script src="./marked.js"></script>
    <script src="./lodash.js"></script>
    <script src="./dom-to-image.js"></script>
    <link rel="stylesheet" type="text/css" href="./github-markdown.css" />
    <script src="./splitpanes.umd.min.js"></script>
    <link href="./splitpanes.css" rel="stylesheet">
    <style>
* { margin: 0; padding: 0; }

html,
body,
#editor {
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
  color: #333;
}

textarea,
#editor > div.box {
  box-sizing: border-box;
  height: 100%;
  padding: 40px;
  vertical-align: top;
}

.box {
  padding: 60px 40px 80px 40px;
  overflow-y: auto;
}

textarea {
  display: block;
  width: 100%;
  padding: 30px;
  padding-bottom: 60px;
  font-size: 16px;
  font-family: "Monaco", courier, monospace;
  background-color: #f6f6f6;
  border: none;
  border-right: 1px solid #ccc;
  outline: none;
  resize: none;
}

.buttons {
  position: absolute;
  right: 50%;
  right: 0;
  bottom: 0;
  left: 0;
  height: 40px;
  padding-top: 4px;
  padding-right: 5px;
  text-align: right;
  background: -webkit-linear-gradient(top, #827265, #716053);
  border-top: 1px #564944 solid;
}

.buttons button {
  display: inline-block;
  height: 36px;
  padding: 1px;
  font-size: 14px;
  line-height: 36px;
  vertical-align: top;
  background: -webkit-linear-gradient(#57483d, #4f4135);
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

.buttons button span {
  display: block;
  height: 34px;
  padding: 0 10px;
  color: #fff;
  font-size: 14px;
  background: -webkit-linear-gradient(#816f61, #736357);
  border-radius: 7px;
  box-shadow: 0 1px rgb(255 255 255 / 10%) inset;
}

.splitpanes__pane {
  position: relative;
  overflow-y: auto;
}

.splitpanes__splitter {
  width: 4px;
  background: #c7c7c7;
}

.buttons button:hover span {
  background: -webkit-linear-gradient(#8e7968, #7e6c5e);
}

.buttons button:focus {
  border: none;
  outline: none;
}

      </style>
  </head>
  <body>
    <div id="editor">

      <splitpanes>
        <pane>
          <textarea :value="input" @input="update" id="markdown-txt"></textarea>
          <div class="buttons">
		    <input @change="selectedFile" type="file" id="fileInput" style="display:none" ></input>
			<button @click="down_select"><span>选择文件</span></button>
		    <button @click="down_txt"><span>保存为文本</span></button>
            <button @click="down"><span>保存为图片</span></button>
            <button @click="save"><span>缓存</span></button>
            <button @click="clear"><span>清空</span></button>
          </div>
        </pane>
        <pane>
          <div class="box">
            <div class="markdown-body" id="markdown-down-id" v-html="compiledMarkdown"></div>
          </div>
        </pane>
      </splitpanes>
    </div>
    <script>

      const md = `
# 致敬老罗的锤子科技

> 你优雅的文字应该有个好的主题。


---

# 代码重构

> 从某种角度来看，设计模式的目的就是为许多重构行为提供目标。

## 提炼函数
如果在函数中有一段代码可以被独立出来，最好把这些代码放进另外一个独立的函数中。
避免出现超大函数。
独立出来的函数有助于代码复用。
独立出来的函数更容易被覆写。

独立出来的函数如果**拥有一个良好的命名**，它本身就起到了注释的作用。


---
## 合并重复的条件片段

如果一个函数体内有一些条件分支语句，而这些条件分支语句内部散布了一些重复的代码，那么就有必要进行合并去重工作。

---
## 把条件分支语句提炼成函数
在程序设计中，复杂的条件分支语句是导致程序难以阅读和理解的重要原因，而且容易导致一个庞大的函数。

---
## 合理使用循环
在函数体内，如果有些代码实际上负责的是一些重复性的工作，那么合理利用循环不仅可以完成同样的功能，还可以使代码量更少。

## 提前让函数退出代替嵌套条件分支
用《重构》里的话说：
> 嵌套的条件分支往往是由一些深信“每个函数只能有一个出口的”程序员写出的。但实际上，如果对函数的剩余部分不感兴趣，那就应该立即退出。引导阅读者去看一些没有用的else片段，只会妨碍他们对程序的理解

2. 传递对象参数代替过长的参数列表
一个函数接收的参数数量越多，函数就越难理解和使用。在使用的时候，还要防止少传了某个参数或者把两个参数搞反了位置。
使用对象就可以不用再关心参数的数量和顺序，只要保证参数对应的key值不变就可以了。

1. 尽量减少参数数量
如果一个函数不需要传入任何参数就可以使用，这种函数是深受人们喜爱的。在实际开发中，向函数传递参数不可避免，但我们应该尽量减少函数接收的参数数量。

---

## 少用三目运算符
- 使用三目运算符和使用if、else代码循环一百万次，时间开销仍处在同一个级别里。
- 如果条件分支逻辑简单清晰可用三目运算符，如逻辑复杂建议还是使用if、else。
---


## 合理使用链式调用
链式调用带来的坏处是调试非常不方便，如果链条很容易发生变化，建议使用普通调用的形式。

## 用return退出多重循环
假设在函数体内有一个两重循环语句，使用控制标记变量或者设置循环标记这两种做法无疑都让人头晕目眩。 用return直接退出方法会带来一个问题，将来不能执行循环之后的代码，可以用一下写法：

---

## 不错的列表
- 项目总是应该提前规划
- 不对应风险
- 合理的安排临时任务

---

## 不错的列表
1. 项目总是应该提前规划
2. 不对应风险
3. 合理的安排临时任务
`

      new Vue({
        el: "#editor",
        data: {
          downIng: true,
          input: ''},
        computed: {
          compiledMarkdown: function() {
            return marked(this.input, { sanitize: true });
          }
        },
        components: { Splitpanes: splitpanes.Splitpanes, Pane:splitpanes.Pane },
        created:function(){
          if(localStorage.getItem('smartisan')){
            this.input = localStorage.getItem('smartisan')
            if(this.input === '') this.input = md
          } else {
            this.input = md
          }
        },
        methods: {
          update: _.debounce(function(e) {
            this.input = e.target.value;
          }, 300),
          save:function(){
            localStorage.setItem('smartisan', this.input)
            alert('缓存成功')
          },
		  down_txt:function(){
            var a = document.createElement("a");
			a.download = "content.txt";
			var blob = new Blob([this.input], {type: "text/txt"});
			var content = URL.createObjectURL(blob);
			a.href = content;
			a.textContent = "download";
			a.click()
            
          },
          down:function(){
            domtoimage.toJpeg(document.getElementById('markdown-down-id'), { quality: 0.95 })
            .then(function (dataUrl) {
                var link = document.createElement('a');
                link.download = 'Markdown-Smartisan.jpeg';
                link.href = dataUrl;
                link.click();
            });
          },
          clear: function(){
            this.input = ''
          },
		  down_select: function(){
		    var inputFile = document.getElementById('fileInput');
			inputFile.click();
		  },
		  selectedFile: function(){
		    var inputFile = document.getElementById('fileInput'); 
			if(inputFile.files.length == 0) {
			  console.log("no file");
			  return;
			}
			var input = this.input;
			var compute_func = this;
			//console.log(compute_func);
			console.log("read file")
			const reader = new FileReader();
			reader.onload = function fileReadCompleted() {
			  //console.log(input)
			  input = reader.result;
			  document.getElementById('markdown-txt').value = reader.result;			  
			  document.getElementById('markdown-down-id').innerHTML=marked(input, { sanitize: true });
			  //compute_func();
			  
			  //console.log(input);
			};
			reader.readAsText(inputFile.files[0]);
		  }
        }
      });
	  
    </script>
    
  </body>
</html>
